<template>
	<view class="container">
		<!-- 搜索区域 -->
		<view class="search-box">
			<image src="../../static/images/search.png" />
			<input type="text" class="search" @click="goSearch" />
		</view>
		
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="height: 280px;">
			<swiper-item>
				<view class="swiper-item">
					<image src="/static/images/cjeq.jpg" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="/static/images/cjeq.jpg" mode=""></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="/static/images/cjeq.jpg" mode=""></image>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 文章列表区域 -->
		<view class="article-list">
			<view class="titleTag">
				推荐文章
			</view>
			<view class="list-item" v-for="item in articleListData" :key="item.article_id" @click="goDetail(item.article_id)">
				<view class="item-cover">
					<view class="cover">
						<image :src="baseUrl+item.cover " class="image" />
					</view>
				</view>
				<view class="item-text">
					<view class="title">{{ item.title }}</view>
					<view class="intro">{{ item.intro }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import request from '../../utils/request.js'
	
	const articleListData = ref([])  // 文章列表数据
	const baseUrl = 'http://127.0.0.1:5000/'  // 图片路径
	const searchData = ref('')  // 搜索的关键词
	
	onLoad(() => {
		getArticleListData()
	})
	
	// 获取文章列表数据
	const getArticleListData = async () => { 
		let result = await request.get('/goodArticle')
		articleListData.value = result
	}
	
	// 跳转详情
	const goDetail = (article_id) => {
		uni.navigateTo({
			url: `/pages/detail/detail?article_id=${article_id}`
		})
	}
	
	// 跳转搜索
	const goSearch = () => {
		uni.navigateTo({
			url: `/pages/search/search?searchData=${searchData.value}`
		})
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		background-color: skyblue;
	}

	.search-box {
		margin: 10px;
		border-radius: 5px;
		background-color: #fff;
		display: flex;
		align-items: center;
	}

	.search-box image {
		height: 25px;
		width: 25px;
		margin-left: 10px;
		margin-right: 10px;
	}

	.search {
		width: 70%;
		height: 30px;
		border-radius: 5px;
	}

	.search-btn {
		background-color: skyblue;
		font-size: 18px;
		border-radius: 5px;
		width: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 25px;
	}
	
	.swiper-item {
		margin: 10px 30px;
	}
	
	.titleTag {
		width: 95%;
		font-size: 25px;
		margin: 10px;
		border-radius: 5px;
		background-color: #fff;
		display: flex;
		justify-content: center;
	}

	.list-item {
		display: flex;
		justify-content: space-between;
		height: 100px;
		background-color: #ffffff;
		margin: 10px;
		border-radius: 5px;
		padding: 10px;
	}

	.item-cover {
		height: 100%;
		width: 100px;
		border-radius: 5px;
	}

	.cover {
		height: 100px;
		width: 100px;
		border-radius: 5px;
	}

	.image {
		border-radius: 5px;
		height: 100px;
		width: 100px;
	}

	.item-text {
		width: 240px;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
	}

	.title {
		margin: 7px;
		font-size: 20px;
	}

	.intro {
		margin: 0 7px;
		height: 50px;
	}
</style>